//顾客的信息完善路由容器组件
import React,{Component} from 'react'
import {connect} from 'react-redux'
import { Redirect } from 'react-router-dom'
import {
    NavBar,
    Button,
    InputItem,
    TextareaItem,
} from 'antd-mobile'

import HeaderSelector from '../../components/header-selector/header-selector'
import {updateUser} from '../../redux/actions'


class CustomerInfo extends Component{

    state = {

        header: '', //头 像 名 称
        post: '', //职 位
        info: '', //个 人 或 职 位 简 介 
    }

    handleChange = (name,value) =>{
        this.setState({
            [name]:value
        })
    }
    //更新header状态
    setHeader = (header) =>{
        this.setState({
            header
        })
    }

    save = () =>{
        //console.log(this.state)
        this.props.updateUser(this.state)
    }

    render(){
        //如果信息已经完善，自动重定向到对应的主界面
        const {header,type} = this.props.user
        if(header){//说明信息完善了
            const path = type==='customer' ? '/customer' : '/zhuren'
            return <Redirect to={path} />
        }
        return(
            <div>
            <NavBar>顾客信息完善</NavBar>
            <HeaderSelector  setHeader={this.setHeader}></HeaderSelector>
            <InputItem placeholder='请输入想买的狗'
            onChange={val => {this.handleChange('post',val)}}>想买的狗</InputItem>
            <TextareaItem placeholder='请输入详细介绍' title='详细介绍' rows={3}
            onChange={val => {this.handleChange('info',val)}}/>
            <Button type="primary" onClick={this.save}>保&nbsp;&nbsp;&nbsp;存</Button>
        </div>
        )
    }
}
export default connect(
    state =>({user:state.user}),
    {updateUser}
)(CustomerInfo)